<template>
  <el-container>
    <el-main class="menu-wrapper">
      <el-form ref="addPromotion" :model="addPromotion" :rules="rules" label-width="90px">
        <div style="display: flex">
          <el-form-item label="活动名称"  prop="name">
            <el-input style="width: 400px" v-model="addPromotion.name"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="签到时段" prop="dateTime">
            <el-date-picker
              style="width: 400px"
              v-model="addPromotion.dateTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="是否连续" prop="firsted" >
            <el-checkbox v-model="addPromotion.continuity"></el-checkbox>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="周天数" prop="cycle" style="width: 300px">
            <el-input-number @keyup.native="onSubmit1" @change="selectMember" size="small"  :min="0" :max="31" :step="1"  v-model="addPromotion.cycle" placeholder="如消费满100生效,输入金额"></el-input-number>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="赠品类型" prop="giftType">
            <el-select style="width: 400px" v-model="addPromotion.giftType" filterable  @change="handleCheckChange">
              <el-option  label="送购物券" value="0" ></el-option>
              <el-option  label="优惠券" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button  v-if="addPromotion.giftType=='0'" type="primary" @click="addGift('添加')">添加</el-button>
            <el-button  v-if="addPromotion.giftType=='1'" type="primary" @click="addCoupon('添加')">添加</el-button>
          </el-form-item>
        </div>
        <div style="display: flex" v-if="addPromotion.giftType=='1'">
          <el-form-item label="优惠券" prop="giftType" style="width: 650px">
            <el-table
              border
              width="100%"
              :data="coupons">
              <el-table-column label="日期" style="width: 210px">
                <template slot-scope="scope">
                  <a> 第{{ scope.$index +1 }}天</a>
                </template>
              </el-table-column>
              <el-table-column label="优惠券名称" style="width: 210px">
                <template slot-scope="scope">
                  <el-select style="display: inline-block" @change="couponChoose($event,scope.$index)"  v-model="scope.row.rewardName" value-key="id" placeholder="请选择优惠券">
                    <el-option v-for="(item,index) in couponList" :key="item.id" :label="item.name" :value="item"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.quantity"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" style="width: 80px">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                    <a style="margin-left: 10px" @click="deleteAd(scope.$index)">
                      <i style="color: #F56C6C" class="el-icon-delete"></i>
                    </a>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </div>
        <div style="display: flex" v-if="addPromotion.giftType=='0'">
          <el-form-item label="购物券" prop="giftType" style="width: 650px">
            <el-table
              border
              width="100%"
              :data="coupons">
              <el-table-column label="日期" style="width: 210px">
                <template slot-scope="scope">
                  <a> 第{{ scope.$index +1 }}天</a>
                </template>
              </el-table-column>
              <el-table-column label="购物券数量" style="width: 210px">
                <template slot-scope="scope" >
                  <el-input v-model="scope.row.quantity" @keyup.native="onSubmit(scope.row.quantity,scope.$index)" ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="奖励名字" >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.rewardName"  disabled="disabled"n></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" style="width: 80px">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                    <a style="margin-left: 10px" @click="deleteAd(scope.$index)">
                      <i style="color: #F56C6C" class="el-icon-delete"></i>
                    </a>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" :loading="clicked" @click="savePromotion('addPromotion')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import SingleUpload from '@/components/Upload/singleUpload'
import { list } from '@/api/coupon'
import { find, update } from '@/api/signIn'
export default {
  name: 'freeshipping-add',

  data(){
    return{
      id:'',
      signInGiftList:[],
      type:'',
      options: [{
        value: '0',
        label: '购物券'
      }, {
        value: '1',
        label: '优惠券'
      }],
      value: '0',
      coupons:[],
      couponList:[
      ],
      listForm: [],
      productList:[],
      vipslist: [],  //获取vip列表
      vipsvalue:[],
      giftTypeList:[],
      clicked:false,
      rules: {
        type:[ {required: true, message: '请输入选择类型', trigger: 'change'},],
        agioRate:[
          {required: true, message: '请输入满减比例', trigger: 'blur'},
        ],
        amount:[
          {required: true, message: '请输入金额', trigger: 'blur'},
        ],
        title:[
          {required: true, message: '请输入促销标题', trigger: 'blur'},
        ],
        minimumPrice:[
          {required: true, message: '请输入数量', trigger: 'blur'},
        ],
        memo:[
          {required: true, message: '请输入等级描述', trigger: 'blur'},
        ],
        enterpriseId:[
          {required: true, message: '请输入所属企业', trigger: 'blur'},
        ],
        integer:[
          {required: true, message: '请输入优先级', trigger: 'blur'},
        ],
        introduction:[
          {required: true, message: '请输入促销说明', trigger: 'blur'},
        ],
        dateTime: [
          {required: true, message: '请选择活动时间',trigger: 'change' },
        ],
      },
      editPromotion:{
        id:''
      },
      addPromotion:{
        name:'',
        continuity:true,
        cycle:'',
        dateTime:[],
        givenAmount:'',
        agioRate:'',
        stock:0,
        amount:'',
        firsted:false,
        giftType:1,
        introduction:'',
        minimumPrice:0,
        modifyDate:'',
        orders:'',
        overlying:false,
        thumbnail:'',
        title:'',
        type:1
      },
    }
  },
  created(){
    this.loadProduct('')
    this.getCoupon(),
    this.findPromotion()
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    $route (newVal, oldVal) {
      if (newVal.name=='springscreen-edit' && newVal.query.id!=this.id) {
        this.findPromotion()
      }
    },
  },
  methods:{
    onSubmit1(){
      this.coupons = []
      let i =0
      for( i=0; i<this.addPromotion.cycle;i++){
        this.addGift()
      }
    },
    onSubmit(data,index){
      console.log("123")
      this.coupons[index].rewardName = data+"购物券"
    },

    handleCheckChange(val) {
      if(val == this.type){
        this.coupons = this.signInGiftList
        console.log(this.signInGiftList)
      }else {
        this.coupons = []
        console.log(this.signInGiftList)

      }
      console.log(val)
      this.editPromotion.giftType = val
      this.$forceUpdate()
    },
    deleteAd(index){
      this.coupons.splice(index, 1)
    },
    getCoupon(){
      list().then(response =>{
        response.data.data.forEach(item=>{
          let coupon={
            name:item.name,
            id:item.id
          }
          this.couponList.push(coupon)
        })
      })
    },
    selectMember(){
      this.coupons = []
      let i =0
      for( i=0; i<this.addPromotion.cycle;i++){
        this.addGift()
      }
    },
    loadProduct(query) {
    },

    setAddClickHeight() {
      setTimeout(() => {
        // 获取表头的高度
        const tableTopHeight = document.querySelector('.el-table__header-wrapper').offsetHeight
        // 获取一行表格高度
        const tableHeight = document.querySelector('.el-table__row').offsetHeight
        // 获取添加按钮样式
        const addClickStyle = document.querySelector('.el-icon-plus')
        // 获取添加按钮高度
        const addClickHeight = addClickStyle.offsetHeight
        // 设置添加按钮的位置
        const moveHeight = tableTopHeight + ((this.productList.length - 1) * tableHeight) + ((tableHeight - addClickHeight) / 2)
        console.log(tableTopHeight, 'tableTopHeight')
        console.log(tableHeight, 'tableHeight')
        console.log(moveHeight, 'moveHeight')
        addClickStyle.style.top = moveHeight + 'px'
      }, 100)
    },
    delProduct(row) {
      var index = this.productList.indexOf(row)
      if (index !== -1) {
        this.productList.splice(index, 1)
      }
    },

    productMethod(query) {
      this.loadProduct(query)
    },
    selectClick(data) {
      this.productList[data.$index].spec = data.row.name.spec1
      this.productList[data.$index].productId = data.row.name.id
      this.productList[data.$index].quantity = 1
      this.productList[data.$index].thumbnail = data.row.name.thumbnail
      this.productList[data.$index].unit = data.row.name.unit
      this.productList[data.$index].name = data.row.name.name
      this.searchSame()
    },
    selectIndex(data){
      this.index=data.$index
    },
    toAddProduct(){
      this.orderVisible = true;
    },
    toSearchProduct(){
      this.procuctVisible = true;
    },
    vipschanges(val){
      this.addPromotion.vips=''
      val.forEach(item=>{
        this.addPromotion.vips+=item
      })

    },
    addGift(type){
      var PromotionCoupons={
        rewardId:"",
        rewardImg:"",
        rewardName:"",
        type:this.addPromotion.giftType
      }
      this.coupons.push(PromotionCoupons)
    },
    addCoupon(){
      var PromotionCoupons={
        rewardId:"",
        rewardImg:"",
        rewardName:"",
        type:this.addPromotion.giftType
      }
      this.coupons.push(PromotionCoupons)
    },
    savePromotion(addPromotion){
      if (this.addPromotion.type===''){
        this.clicked=false
      }
      this.$refs[addPromotion].validate((valid)=>{
        if (valid){
          var addPromotion={
            name:this.addPromotion.name,
            id:this.addPromotion.id,
            continuity:this.addPromotion.continuity,
            cycle:this.addPromotion.cycle,
            signInGiftList: this.coupons,
            beginDate:'',
            endDate:'',
            status:0,
          }
          if (this.addPromotion.dateTime.length > 0) {
            addPromotion.beginDate = this.addPromotion.dateTime[0];
            addPromotion.endDate = this.addPromotion.dateTime[1]
          }
          update(addPromotion).then(response=>{
            console.log(response)
            console.log(response)
            this.clicked=false
            this.$router.push({
              path: '/signin/list'
            })

          }).catch(error =>{
            this.clicked = false;
            console.log('error')
          })
        }else{
          this.clicked = false;
        }
      })
    },
    findPromotion(){
      console.log("213")
      this.editPromotion.id = this.$route.query.id;
      find(this.editPromotion.id).then(response =>{
        console.log(response)
        this.addPromotion=response.data.signIn;
        this.addPromotion.giftType = JSON.stringify(response.data.signIn.signInGiftList[0].type)
        this.type  =JSON.stringify(response.data.signIn.signInGiftList[0].type)
        this.addPromotion.dateTime = [this.addPromotion.beginDate,this.addPromotion.endDate]
        this.coupons = response.data.signIn.signInGiftList;
        this.signInGiftList = response.data.signIn.signInGiftList;
      })
    },

    couponChoose(data,index){
      console.log(data)
      console.log(index)
      console.log(this.coupons)
      this.coupons[index].rewardName = data.name
      this.coupons[index].rewardId = data.id
    },



  },
  filters:{
    watchAmountType(val){
      if (val==3){
        return '满减金额'
      }else if (val==7){
        return '充值金额'
      }
    }
  },
  components:{SingleUpload},
}
</script>

<style scoped>
.menu-wrapper {
  margin: 15px;
}
.dialog-button-slot{
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.el-upload {
  width: 50px!important;
  height: 50px!important;
}
</style>



